<template>
  <div class="wechat-official">
    <BasicModal title="更多精彩，关注微信公众号~" to=".wechat-official" class="w-[400px]" @register="wxModalRegister">
      <n-card class="wechat-card" :bordered="false">
        <n-image :src="getImageUrl('common', 'wx_official', 'jpg')" alt="微信公众号" />
      </n-card>
      <template #action>
        <div></div>
      </template>
    </BasicModal>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
import { useModal } from '@cmps/Modal/useModal'
import { getImageUrl } from '@/utils'

const BasicModal = defineAsyncComponent(() => import('@cmps/Modal/BasicModal.vue'))
const emit = defineEmits(['register'])

const [wxModalRegister, { openModal: basicOpenWxModal }] = useModal({})

defineExpose({
  basicOpenWxModal,
})
</script>

<style lang="less" scoped>
.wechat-official {
  &:deep(.n-dialog__content) {
    margin-top: 12px;
    .wechat-card {
      .n-card__content {
        padding: 20px 0 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    }
  }
}
</style>
